<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON字符串</title>
</head>
<body>
<div id="app">
    <!--显示JSON字符串-->
    {{json1}}<br/>
    <!--显示JSON字符串对象中的某个属性-->
    id:{{json1.id}}<br/>
    name:{{json1.name}}<br/>
    gender:{{json1.gender}}
    <hr/>
    {{json2}}<br/>
    <span v-for="a in json2">{{a}}&nbsp;</span>
    <hr/>
    {{json3}}<br/>
    <p v-for="a in json3">
        id:{{a.id}},name:{{a.name}},gender:{{a.gender}}
    </p>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                // 代表一个对象
                json1: {
                    "id": "1001",
                    "name": "张三",
                    "gender": "男"
                },
                // 代表一个数组
                json2: [
                    "西安", "宝鸡", "渭南", "汉中"
                ],
                // 数组+对象
                json3: [
                    {
                        "id": "1001",
                        "name": "张三1",
                        "gender": "男"
                    },
                    {
                        "id": "1002",
                        "name": "张三2",
                        "gender": "女"
                    },
                    {
                        "id": "1003",
                        "name": "张三3",
                        "gender": "男"
                    },
                    {
                        "id": "1004",
                        "name": "张三4",
                        "gender": "男"
                    }
                ]
            }
        },
        methods: {
            funA() {
                console.log(this.json3)
                let json_str = JSON.stringify(this.json3)
                console.log(json_str)
                let json_obj = JSON.parse(json_str)
                console.log(json_obj)
            }
        },
        created() {
            // 等同于onload，页面加载时执行这里的代码
            this.funA()
        }
    })
</script>